<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="'Replication Task Wizard' | translate"
  [loading]="isLoading"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <mat-vertical-stepper [linear]="true">
      <ix-use-ix-icons-in-stepper></ix-use-ix-icons-in-stepper>

      <mat-step [stepControl]="whatAndWhere().form">
        <ng-template matStepLabel>{{ 'What and Where' | translate }}</ng-template>
        <ix-replication-what-and-where (customRetentionVisibleChange)="isCustomRetentionVisible = $event"></ix-replication-what-and-where>
      </mat-step>

      <mat-step [stepControl]="when().form">
        <ng-template matStepLabel>{{ 'When' | translate }}</ng-template>
        <ix-replication-when [isCustomRetentionVisible]="isCustomRetentionVisible" (save)="onSubmit()"></ix-replication-when>
      </mat-step>
    </mat-vertical-stepper>
  </mat-card-content>
</mat-card>
